import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

//外窗口
ApplicationWindow{
    visible: true;
    width: 880;
    height: 600;
    title: qsTr("qml简单的登录界面")
    id:root
    color: "lightblue"

    //属性，标题栏隐藏 无框窗口提示,必须要前面的,不然系统桌面菜单栏,看不到软件
    flags: Qt.Window | Qt.FramelessWindowHint

    property int dragx: 0 //属性命令要小写字母开头
    property int dragy: 0
    property bool isDrag: false

    //声明信号：登录按钮和注册按钮用           登录：0 注册：1
    signal btnclicked(string name,string pass)
    /*
      1.核心控件和布局管理 和 登录事件吹
      文本说明：登录系统
      用户名：username
      密码：password
      登录按钮：submit
      注册按钮：register
      登录事件处理
      onClicked
      */
    //设置渐变色的矩形
    Rectangle{
        //宽高同外边窗口尺寸
        width:parent.width
        height:parent.height
        //居中
        anchors.centerIn: parent
        //渐变色
        //设置渐变色，渐变色优先级大于color颜色
        gradient: Gradient{
            GradientStop{position: 1;color: "#4158d0"}
            GradientStop{position: 0;color: "#c850c0"}
            //设置渐变方向为：水平渐变
            orientation:Gradient.Horizontal
        }

        //窗口拖动
        MouseArea{
            width: parent.width
            height: 100
            //鼠标按下
            onPressed: {
                //记录下鼠标按下的坐标，更改标志位
                root.dragx = mouseX;
                root.dragy = mouseY;
                root.isDrag = true
            }
            //鼠标抬起
            onReleased: root.isDrag = false;//鼠标释放
            //位置改变时候
            onPositionChanged: {
                if(root.isDrag)
                {
                    console.log("mouseX = ", mouseX)
                    console.log("mouseY = ",mouseY)
                    //拖动的位置 = 鼠标移动后位置-鼠标按下的位置
                    root.x += mouseX - root.dragx
                    root.y += mouseY - root.dragy
                }
            }
        }

        //右上角的x 关闭窗口
        Rectangle{
            //右上角的坐标位置
            x:root.width - 35
            y:5
            width: 30
            height: 30
            color: "#00000000" //rgba 最后表示透明度
            Text {
                id: close
                text: qsTr("×")
                color: "black"
                font.pixelSize: 28
                anchors.centerIn: parent
            }
            //鼠标区域事件
            MouseArea{
                anchors.fill: parent
                //设置监听鼠标移入事件，默认不开启
                hoverEnabled: true
                //鼠标进入时
                onEntered: {
                    parent.color = "#1BFFFFFF"
                }
                onExited: parent.color = "#00000000" // 鼠标退出时
                onPressed: parent.color = "#FF0000"; //鼠标按下时
                onClicked: root.close() //调用主窗口函数，关闭界面。
            }
        }
        Rectangle{

            width: 800
            height: 500
            anchors.centerIn: parent
            //设置圆角
            radius: 10
            //插入图片
            Image {
                id: image
                x: 57
                y: 100
                source: "qrc:/icon/icon/login.jpg"
                width: 350
                height: 350

            }

            //文本说明：登录系统
            Text {
                x:505
                y:130
                width: 120
                height: 30
                font.pointSize: 24
                text: qsTr("注册页面")
            }

            //用户名输入框：username
            TextField{
                id:username
                x:440
                y:200
                width: 300
                height: 50
                font.pixelSize: 20 //字号：20

                //默认提示文字 提示文字颜色
                placeholderText: "输入用户名"
                placeholderTextColor:"#999999"
                color: "#666666"
                //距离左边边框距离 60
                leftPadding: 60
                //背景设置
                background: Rectangle{
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
                    radius: 20
                }
                //设置左边的用户图标
                Image {
                    width: 20
                    height: 20
                    x:30;y:15
                    source: username.activeFocus ?
                                "qrc:/icon/icon/kaifdog.png":"qrc:/icon/icon/qusefdogicon.png"
                }

            }
            //密码输入框：password
            TextField{
                id:password
                //x坐标和 用户名输入框相同
                x:username.x
                //高：比用户名输入框多10(间距为10)
                y:username.y+username.height+10
                //宽高和用户名框相同
                width: username.width
                height: username.height
                font.pixelSize: username.font.pixelSize //字号：同 用户名
                echoMode: TextInput.Password //设置输入模式为密码，设置后不能输入中文

                leftPadding: username.leftPadding
                //默认提示文字 提示文字颜色
                placeholderText: "输入密码"
                placeholderTextColor: "#999999"
                color: "#666666"
                //背景设置
                background: Rectangle{
                    color: "#e6e6e6"
                    border.color: "#e6e6e6"
                    radius: 20
                }
                //she'zhi左边的用户图标
                Image {
                    width: 20
                    height: 20
                    x:30;y:15
                    source: password.activeFocus ?
                                "qrc:/icon/icon/kaisuo.png":"qrc:/icon/icon/suo.png"
                }
            }

            //登录按钮：submit
            Button{
                id:submit
                //设置位置在 密码输入框下 10
                x:password.x
                y:password.y+password.height+10
                width: password.width
                height: password.height
                text: qsTr("注册")
                font.pixelSize: username.font.pixelSize
                //按钮的点击
                onClicked: {
                    //控制台输入：输入框中的文本内容
                    console.log("注册："+username.text+":"+password.text)
                    btnclicked(username.text,password.text,0)
                }
                background: Rectangle{
                    radius: 20
                    color: {
                        if(submit.down){
                            return"#F5F5F0"
                        }
                        else if( submit.hovered)
                        {
                            return"#DCD0E7"
                        }
                        else
                            return "#57b864"

                    }
                }

            }


        }
    }
}
